import QtQuick 1.0

/** ItemsListView - A view of a single subscription, showing a list
    of downloadable episodes, and a download button
    which turns into a play button when it is downloaded.
 */
ListView {
    Image {
        id: closeButton
        anchors.right:  parent.right
        anchors.top:  parent.top

        height: 32
        width: 32
        source: "qrc:/icons/close.png"
        MouseArea {
            anchors.fill:  parent
            onClicked: mainWindow.close();
        }
    }


    Keys.onPressed: {
        if ((event.key == Qt.Key_Left) || (event.key == Qt.Key_Backtab)) {
            event.accepted = true;
            flickableView.state = "Parentlist";
        }
    }

    id: subscriptionView

    KeyNavigation.left: parentList;

    objectName: "subscriptionView"
    model: itemsListModel
    interactive: true
    delegate: podcastDelegate
    width: mainWindow.qmlWidth;
    height: mainWindow.qmlHeight;

    focus: true
    clip: true

    Component {
        id: podcastDelegate

        Item {
            id: podcastItem;
            property real detailsOpacity : 0
            width: subscriptionView.width
            height: 62
            clip: true;

            SongItem {
                   id: background
                   z: -1
                   x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                   border.color: "orange"
                   radius: 5
                   // This mouse region covers the entire delegate.
                   // When clicked it changes mode to 'Details'.  If we are already
                   // in Details mode, then we go back to regular mode.
                   MouseArea {
                           anchors.fill: parent
                           onClicked : {
                               // set a C++ property from QML
                               podcastItem.state = 'Details';
                           }
                   }

            }

            Row {
                id: rowLayout
                x: 10; y: 10; spacing: 10

                height: parent.height
                width: parent.width

                WrappedText {
                    id: viewText
                    text: "" + progress + "% -" + name;
                    font.pointSize: 8
                }
            }

            Item {
                id: detailsItem
                width: subscriptionView.width;
                height: parent.height ;
                x: 10
                opacity: podcastItem.detailsOpacity
                MouseArea {
                    anchors.fill:  parent;
                    onClicked:  {
                        podcastItem.state = '';
                    }
                }
                Column {
                    y: viewText.y + viewText.height + 125;
                    WrappedText {
                        text: description
                    }
                    WrappedText {
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere;
                        text: url
                    }
                    StyledText {
                        text: pubDate;
                    }
                    WrappedText {
                        text: path
                    }
                }

                // Play button:
                Image {
                    y: 20
                    anchors.right:  detailsItem.right;
                    anchors.rightMargin: 30
                    id: downloadImage
                    source: pictureUrl
                    opacity: podcastItem.detailsOpacity;
                    height: 20
                    width: 20
                    MouseArea {
                        anchors.fill:  parent;
                        onClicked: {
                            mainWindow.clickEpisode(index);
                            onClicked: podcastItem.state = '';
                        }
                    }
                }
                // Retry Button (if isAvailable)
                Image {
                    id: retryButton
                    anchors.right: downloadImage.left
                    anchors.bottom:  downloadImage.bottom;
                    opacity: podcastItem.detailsOpacity;
                    anchors.rightMargin: 30
                    source: "qrc:/icons/reload.png"
                    visible: isAvailable
                    height: 60
                    width: 60
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {itemsListModel.downloadEpisode(index);}
                    }
                }

                // Queue/Dequeue button:
                Image {
                    id: queueButton
                    anchors.right: retryButton.left;
                    anchors.bottom:  downloadImage.bottom;
                    opacity: podcastItem.detailsOpacity;
                    visible: isAvailable
                    height: 50
                    width: 50
                    source: mainWindow.positionInQueue(path) == -1 ?
                            "qrc:/icons/enqueue.png" : "qrc:/icons/dequeue.png";
                    MouseArea {
                        anchors.fill:  parent
                        onClicked: {
                            podcastItem.state = '';
                            mainWindow.enqueue(path);
                        }
                    }
                }


                // delete button:
                Image {

                    anchors.right:  queueButton.left;
                    anchors.bottom: downloadImage.bottom;
                    id: deleteImage
                    source: "qrc:/icons/delete.png";
                    opacity: podcastItem.detailsOpacity;
                    visible: isAvailable
                    height: 64
                    width: 64
                    MouseArea {
                        anchors.fill:  parent;
                        onClicked: {
                            onClicked: podcastItem.state = '';
                            itemsListModel.deleteEpisode(index);
                        }
                    }
                }
            }


            states: State {
                name: "Details"
//                PropertyChanges { target: mainWindow; chosenFromQML: subscriptionView }
                PropertyChanges { target: background; color: "black" }
                PropertyChanges { target: downloadImage; width: 74; height: 75 } // Make picture bigger
                PropertyChanges { target: downloadImage; opacity: .9; x: 0 } // Make image visible.
                PropertyChanges { target: podcastItem; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: podcastItem; height: subscriptionView.height  } // Fill half of the area with detailed view
                // Disallow flicking while we're in detailed view
                PropertyChanges { target: subscriptionView; interactive: false }

                // Move the list so that this item is at the top.
                PropertyChanges { target: podcastItem.ListView.view; explicit: true; contentY: podcastItem.y }

            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }

        }
    }
}


